<template>
  <div id="map" class="map-2d"></div>
</template>

<script>
import "leaflet/dist/leaflet.css"
import "leaflet"
import 'mars2d/dist/mars2d.css'
import * as mars2d from 'mars2d'
// 导入mars2d插件（按需使用，需要先npm install）
import 'mars2d-esri'

export default {
  name: "Mars2DMap",
  data() {
    return {
      map: null, // mars2d.Map三维地图对象
      renderedCenters: new Set(), // 用于追踪已经渲染过的中心点
    }
  },
  mounted() {
    this.initMap()
  },
  beforeDestroy() {
    this.destroyMap()
  },
  methods: {
    // 初始化地图
    initMap() {
      const mapOptions = {
        zoom: 11,
        center: { lng: 121.37455, lat: 28.36927 },
      }

      this.map = new mars2d.Map("map", mapOptions)
      this.map.basemap = 2017 // 蓝色底图

      // 创建矢量数据图层
      const graphicLayer = new mars2d.layer.GraphicLayer()
      this.map.addLayer(graphicLayer)

      let json = require("./wl2.json")
      const arr = mars2d.Util.geoJsonToGraphics(json) // 解析geojson

      for (let i = 0; i < arr.length; i++) {
        const item = arr[i]

        // polygon面
        const polygonEntity = new mars2d.graphic.Polygon({
          latlngs: item.latlngs,
          style: {
            fill: true,
            fillColor: "#4881a7",
            fillOpacity: 0.5,
          },
        })
        graphicLayer.addGraphic(polygonEntity)

        // PolylineEntity线
        const graphicLine = new mars2d.graphic.Polyline({
          latlngs: item.latlngs,
          style: {
            color: "rgba(255,255,255,0.5)",
            width: 1,
          },
        })
        graphicLayer.addGraphic(graphicLine)

        // 中心点
        const center = item.attr.centroid
        const centerKey = `${center[1]}_${center[0]}`

        // 检查是否已经渲染过
        if (this.renderedCenters.has(centerKey)) {
          continue
        }
        this.renderedCenters.add(centerKey) // 标记为已渲染

        // 扩散点
        const graphic = new mars2d.graphic.Marker({
          latlng: [center[1], center[0]],
          style: {
            width: 8,
            pulse: true,
            pulseColor: "#ff0000",
          },
        })
        graphicLayer.addGraphic(graphic)

        // 数字显示
        const number = Math.floor(Math.random() * (4000 - 3000 + 1) + 3000) // 随机数字 3000-4000
        const divGraphic = new mars2d.graphic.DivGraphic({
          latlng: [center[1], center[0]],
          style: {
            html: `
              <div class="marsBlackPanel animation-spaceInDown">
                <div class="marsBlackPanel-text name">${item.attr.name}</div>
                <div class="marsBlackPanel-text number">${number}</div>
              </div>`,
            horizontalOrigin: mars2d.HorizontalOrigin.CENTER,
            verticalOrigin: mars2d.VerticalOrigin.BOTTOM,
          },
        })
        graphicLayer.addGraphic(divGraphic)
      }
    },

    // 释放地图资源
    destroyMap() {
      if (this.map) {
        this.map = null
      }
    },
  },
}
</script>

<style scoped>
.map-2d {
  height: 100%;
  width: 100%;
  /* background-color: #99a748; */
  position: relative;
}

.marsBlackPanel {
  background-color: rgba(0, 0, 0, 0.6);
  padding: 5px;
  border-radius: 5px;
  color: #fff;
  text-align: center;
}

.marsBlackPanel-text {
  font-size: 14px;
  margin: 2px 0;
}

.marsBlackPanel-text.name {
  font-weight: bold;
  font-size: 16px;
}

.marsBlackPanel-text.number {
  font-size: 14px;
  color: #ff0000;
}
</style>
